<template>
	<div>
		<div id="container"></div>
		<div class="input-card">
			<!-- <button class="btn" @click="stopedit">结束编辑</button> -->
			<!-- <button class="btn" @click="clearMarks">清空</button> -->
		</div>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')

export default {
	name: 'MapArea',
	data() {
		return {
			url: common.url,
			head_url: common.head_url,
			path: [],
			polyEditor: '',
			shopList: []
		}
	},
	props: ['allAreaMesData'], //props接收
	async created() {
		try {
			setTimeout(() => {
				var that = this
				var map = new AMap.Map('container', {
					center: [116.471354, 39.994257],
					zoom: 16.8
				})

				that.mouseTool = new AMap.MouseTool(map)

				that.mouseTool.on('draw', function (event) {
					if (event.obj && event.obj.Ce && event.obj.Ce.path) {
						const path = event.obj.Ce.path
						that.path = that.objToArr(path)
					} else if (event.obj && event.obj.De && event.obj.De.path) {
						const path = event.obj.De.path
						that.path = that.objToArr(path)
					}

					that.redraw()
				})

				that.drawPolygon()
			}, 1500)
		} catch (err) {
			console.log(err)
		}
	},
	watch: {
		allAreaMesData: {
			handler(newValue) {
				if (!newValue) return

				const that = this
				const map = new AMap.Map('container', {
					center: [116.471354, 39.994257],
					zoom: 16.8
				})

				//画电子围栏
				//画第n个电子围栏
				if (this.allAreaMesData) {
					this.allAreaMesData.forEach(element => {
						var polygon = new AMap.Polygon({
							path: element.coordinates_list,
							strokeColor: '#D1C34D',
							strokeOpacity: 0.2,
							fillOpacity: 0.4,
							fillColor: '#E86E03',
							zIndex: 50
						})
						map.add(polygon)
					})
				}

				that.mouseTool = new AMap.MouseTool(map)

				that.mouseTool.on('draw', function (event) {
					if (event.obj && event.obj.Ce && event.obj.Ce.path) {
						const path = event.obj.Ce.path
						that.path = that.objToArr(path)
					} else if (event.obj && event.obj.De && event.obj.De.path) {
						const path = event.obj.De.path
						that.path = that.objToArr(path)
					}

					that.redraw()
				})

				that.drawPolygon()
			},
			immediate: true,
			deep: true
		}
	},
	mounted() {},
	methods: {
		drawPolygon() {
			this.mouseTool.polygon({
				strokeColor: '#FF33FF',
				strokeWeight: 6,
				strokeOpacity: 0.2,
				fillColor: '#1791fc',
				fillOpacity: 0.4,
				// 线样式还支持 'dashed'
				strokeStyle: 'solid'
				// strokeStyle是dashed时有效
				// strokeDasharray: [30,10],
			})
		},
		objToArr(obj) {
			var arr = []
			for (let i in obj) {
				let o = {}
				o = new Array()
				o[0] = obj[i].lng
				o[1] = obj[i].lat
				arr.push(o)
			}
			return arr
		},
		redraw() {
			var that = this
			var map = new AMap.Map('container', {
				center: [116.471354, 39.994257],
				zoom: 16.8
			})

			var path = this.path

			var polygon = new AMap.Polygon({
				path: path,
				strokeColor: '#FF33FF',
				strokeOpacity: 0.2,
				fillOpacity: 0.4,
				fillColor: '#1791fc',
				zIndex: 50
			})

			map.add(polygon)
			// 缩放地图到合适的视野级别
			map.setFitView([polygon])

			this.polyEditor = new AMap.PolyEditor(map, polygon)

			this.polyEditor.open()

			this.polyEditor.on('end', function (event) {
				if (event.obj && event.obj.Ce && event.obj.Ce.path) {
					const path = event.obj.Ce.path
					that.path = that.objToArr(path)
				} else if (event.obj && event.obj.De && event.obj.De.path) {
					const path = event.obj.De.path
					that.path = that.objToArr(path)
				}
			})

			//画第n个电子围栏
			if (this.allAreaMesData) {
				this.allAreaMesData.forEach(element => {
					var polygon = new AMap.Polygon({
						path: element.coordinates_list,
						strokeColor: '#D1C34D',
						strokeOpacity: 0.2,
						fillOpacity: 0.4,
						fillColor: '#E86E03',
						zIndex: 50
					})
					map.add(polygon)
				})
			}
		},
		stopedit() {
			this.polyEditor.close()
			this.sendMsg()
		},
		//子向父传值
		sendMsg() {
			this.$emit('func', this.path)
		},
		//清除前面的3个点标记
		clearMarks() {
			// this.polygon.remove();
			// map.clear(); //清空覆盖物
			// this.map.remove(this.polyEditor);
			// this.map.clearMap();
		}
	},
	filters: {}
}
</script>

<style scoped>
#container {
	width: 80%;
	height: 1000px;
}
.btn {
	display: inline-block;
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border: 1px solid transparent;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
		box-shadow 0.15s ease-in-out;
	background-color: transparent;
	background-image: none;
	color: #25a5f7;
	border-color: #25a5f7;
	padding: 0.25rem 0.5rem;
	line-height: 1.5;
	border-radius: 1rem;
	-webkit-appearance: button;
	cursor: pointer;
}

.btn:hover {
	color: #fff;
	background-color: #25a5f7;
	border-color: #25a5f7;
	text-decoration: none;
}

.btn:focus {
	outline: none;
}

.input-card {
	margin-top: 20px;
}
</style>



// WEBPACK FOOTER //
// src/components/components/Maparea.vue